<template>
  <div id="container">
    <!-- header -->
    <mt-header fixed title="京东商城"></mt-header>

    <!-- 主要组件区域 -->
    <router-view></router-view>

    <!-- footBar -->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/sort">
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">分类</span>
      </router-link>
      <router-link class="mui-tab-item" to="/find">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">发现</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span id="badge" class="mui-badge">{{ $store.getters.getAllCount }}</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>

      <router-link class="mui-tab-item" to="/user">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  import cookie from './util/cookie.js';
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
      }
    },
    created() {
      this.init();
      this.getCarInfo();
      this.initSortsList();
    },
    methods: {
      // 获取商品购物车信息，用于自动登录时获取商品购物车信息
      getCarInfo() {
        var token = cookie.getCookie('token');
        if (token != '' && token != null) {
          this.$http.get('/getcarinfo/1111').then(data => {
            if (data.body.status === 0) {
              console.log('http请求获取商品购物车信息');
              this.$store.commit('initCarInfo', data.body.data);
            }
          }).catch({
          });
        }
      },

      // 获取分类导航栏信息，当localStorage有car的信息时不会调用该请求
      initSortsList() {
        var SortList = localStorage.getItem('sorts_list');
        if (SortList == '' || SortList == null || SortList == 'undefined') {
          this.$http.get('/sort/getSorts').then(data => {
            console.log('http请求获取分类导航栏信息');
            this.$store.commit('initSortList', data.body);
            localStorage.setItem('sorts_list', JSON.stringify(data.body));
          }).catch(data => {

          });
        }
      },



      // 初始化所有localStorage的信息，以确保每次进入网站都会发出请求获取一次信息
      // 已有的localStorage变量
      // 轮播图地址 lunbotus
      // 用户购物车信息 car
      // 用户信息 user_info
      // 分类导航栏 sorts_list

      init() {
        localStorage.setItem('lunbotus', '');
        localStorage.setItem('car', '');
        localStorage.setItem('user_info', '');
        localStorage.setItem('sorts_list', '');
      }

    }
  }
</script>


<style lang="scss" scoped>
  #container {
    padding-top: 40px;
    overflow-x: hidden;
  }

  .clear-both::after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    clear: both;
  }


  .v-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .v-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s ease;
  }
</style>